import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'mobx-react';
import { createHashHistory } from 'history';
import { Router, Route, useRouterHistory } from 'react-router';
import { RouterStore, syncHistoryWithStore } from 'mobx-react-router';

import weaPortalEM from 'weaPortalEM';

const browserHistory = useRouterHistory(createHashHistory)({
    queryKey: '_key',
    basename: '/',
});

const routing = new RouterStore();

const allStore = {
    routing,
    ...weaPortalEM.store,
};

const history = syncHistoryWithStore(browserHistory, allStore.routing);
window.weaHistory = history;

const Root = () => (
    <Provider ecId={`${this && this.props && this.props.ecId || ''}_Provider@hce9gh`} {...allStore}>
        <Router ecId={`${this && this.props && this.props.ecId || ''}_Router@tesf1d`} history={history}>
            <Route ecId={`${this && this.props && this.props.ecId || ''}_Route@y8ondk`} path="/" component={props => props.children}>
                {weaPortalEM.Route}
            </Route>
        </Router>
    </Provider>
);

ReactDOM.render(<Root ecId={`${this && this.props && this.props.ecId || ''}_Root@bbzlwk`} />, document.getElementById('container'));
